<template>
	<div class="main">
		<!-- 顶部工具部分 -->
		<div class="top">
			<div class="left">推荐</div>
			<div class="right">
				<navigator url="/pages/postTrends/postTrends"><button>发动态</button></navigator>
			</div>
		</div>
		<!-- 内容部分 -->
		<div class="content">
			<u-card v-for="item in triends" :key="item.triend_id">
				<template v-slot:head>
					<u-row class="v-head">
						<u-col span="2">
							<u-avatar :src="item.avatar" mode="circle"></u-avatar>
						</u-col>
						<u-col span="6">
							<u-row>
								<u-col class="nickname">{{item.nickname}}</u-col>
							</u-row>
							<u-row>
								<u-col class="infos">{{item.age}}岁 {{item.address}} {{item.occupation}}</u-col>
							</u-row>
						</u-col>
						<u-col span="4">
							<button class="btn1" v-if="!followFlag" @click="toMessageDetail(item.user_id)">聊天</button>
							<button class="btn1" v-else @click="follow(item)">关注</button>
						</u-col>
					</u-row>
				</template>
				<template v-slot:body>
					<div class="v-body" @click="toTrendsDetail(item)">
						<div class="v-body-des">
							{{item.content}}
						</div>
						<div class="v-body-imgs">
							<div class="item" v-for="itm,idx in item.triendImgs" :key="itm.triend_img_id">
								<u-image width="100%" height="400rpx" :src="itm.img"></u-image>
							</div>
						</div>
					</div>
				</template>
				<template v-slot:foot>
					<div class="v-foot">
						<div class="v-foot-left">
							<u-icon name="info-circle" size="34" @click="report(item.triend_id)"></u-icon>
							<u-modal v-model="reportFlag" :content="reportContent" show-cancel-button
								@confirm="confirmReport(item.triend_id)" :async-close="true"></u-modal>
						</div>
						<div class="v-foot-right">
							<u-icon name="thumb-up-fill" size="34" :color="starFillColor" :label="item.triend_like_count"
								@click="changeStar(item)"></u-icon>
							<u-icon name="chat-fill" size="34" color="" :label="item.triend_comment_count" @click="toTrendsDetail(item)"></u-icon>
						</div>
					</div>
				</template>
			</u-card>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import { rendomTriend } from '../../api/triend.js'
	import { clickFocus } from '../../api/user.js'
	const triends = ref([])
	//点赞图表的颜色
	const starFillColor = ref('')
	//点击点赞，并且变色
	const changeStar = (obj) => {
		switch (starFillColor.value) {
			case '':
				starFillColor.value = 'pink'
				break
			case 'pink':
				starFillColor.value = ''
				break
		}
	}
	const uToast = ref()
	//点击关注
	const followFlag = ref(false)
	const follow = async(obj) => {
		const result = await clickFocus({
			user_id:uni.getStorageSync('userInfo').user_id,
			friend_id:obj.user_id
		})
		if(result.code == 1){
			followFlag.value = true
		}
		
	}
	//点击“聊天”跳转
	const toMessageDetail = (id) => {
		uni.navigateTo({
			url: `/pages/messageDetail/messageDetail?id=${id}`,
			events: {
				// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				acceptDataFromOpenedPage: function(data) {
					// console.log(data)
				},
				someEvent: function(data) {
					// console.log(data)
				}
			},
			success: function(res) {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('acceptDataFromOpenerPage', {
					id: id
				})
			}

		})
	}
	//点击去动态详情
	const toTrendsDetail = (obj) => {
		uni.navigateTo({
			url: '/pages/trendDetail/trendDetail',
			events: {
				// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				acceptDataFromOpenedPage: function(data) {
					// console.log(data)
				},
				someEvent: function(data) {
					// console.log(data)
				}
			},
			success: function(res) {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('acceptDataFromOpenerPage', {
					...obj
				})
			}

		})
	}
	//点击举报
	const reportFlag = ref(false)
	const reportContent = ref('确认举报该动态？')
	const report = (id) => {
		reportFlag.value = true
	}
	//确认举报
	const confirmReport = (id) => {
		reportContent.value = '举报成功'
		setTimeout(() => {
			// 3秒后自动关闭
			reportFlag.value = false;
			
		}, 2000)
	}
	//获取随机动态
	const getRandomTriend = async() => {
		const result = await rendomTriend()
		triends.value.push(result.data)
	}
	onMounted(() => {
		for(let i = 0;i<5;i++){
			getRandomTriend()
		}
	})
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;

		//顶部工具部分
		.top {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			margin-top: 20rpx;

			.left {
				font-size: 40rpx;
				color: #000;
			}

			.right button {
				width: 160rpx;
				height: 80rpx;
				background-color: hotpink;
				color: #fff;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 80rpx;
				margin-top: 10rpx;
			}
		}

		//内容部分
		.content {
			display: flex;
			flex-direction: column;

			//卡片头部部分
			.v-head {
				height: 100rpx;
				line-height: 50rpx;

				.btn1 {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					border-radius: 60rpx;
					color: hotpink;
					background-color: #efd2d4;
				}

				.nickname {
					font-size: 36rpx;
				}

				.infos {
					font-size: 24rpx;
					color: darkgray;
				}
			}

			//卡片身体部分
			.v-body {
				display: flex;
				flex-direction: column;

				.v-body-des {
					margin: 20rpx 0;
					padding: 0 20rpx;
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.v-body-imgs {
					text-align: center;
					display: flex;
					flex-wrap: wrap;

					.item {
						width: calc(50% - 20rpx);
						height: 400rpx;
						margin: 10rpx 10rpx;
					}
				}
			}

			//卡片脚部部分
			.v-foot {
				display: flex;
				justify-content: space-between;

				.v-foot-right u-icon:first-child {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>